<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/index.css" />
</head>

<body>
    <div id="typelist">
        <h2>类型列表</h2>
        <el-form :inline="true" class="demo-form-inline">

            <el-form-item label="类型名称">
                <el-input v-model="typeName" placeholder="类型名称" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getTypeList" icon="el-icon-search">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="typeList" style="width: 100%" stripe border>
            <el-table-column type="index" label="序号">
            </el-table-column>
            <el-table-column prop="typeId"style="width:25%" label="类型编号"v-if="false">
            </el-table-column>
            <el-table-column prop="typeName" style="width:25%" label="类型名称">
            </el-table-column>

            <el-table-column label="操作" style="width:25%">
                <template slot-scope="scope">
                    <el-button size="mini" @click="preUpdate(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="deleteById(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[2,5,10,20]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>

        <el-dialog title="修改房屋类型" :visible.sync="dialogVisible" width="60%">
            <el-form ref="updateform" :model="typeObj" label-width="100px" style="width:500px">

                <el-form-item label="类型编号">
                    <el-input v-model="typeObj.typeId" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="类型名称">
                    <el-input v-model="typeObj.typeName"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="update">修改</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>

    </div>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>

    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript">
        let v = new Vue({
            el: "#typelist",
            data: {
                typeList: [],
                currentPage: 1, //当前页码
                size: 2, //每页显示的条数
                total: -1, //总记录数
                typeName: "",
                dialogVisible: false,//控制 el-dialog是否显示

                typeObj: {
                    typeId: "",
                    typeName: ""

                }
            },
            created() {
                this.getTypeList();
            },
            methods: {
                getTypeList: function () {
                    let that = this;
                    let str = "curPage=" + this.currentPage + "&size=" + this.size + "&typeName=" + this.typeName;
                    axios.post("/housesType/selectByNameByPageInfo", str).then(function (r) {
                        if (r.data.state == "success") {
                            that.typeList = r.data.housestypelist;
                            that.total = r.data.total;
                        }
                    });
                },

                handleSizeChange: function (val) { //val--size   size改变时
                    this.size = val;
                    this.getTypeList();
                },
                handleCurrentChange: function (val) { //val--currentPage  当前页码改变时
                    this.currentPage = val;
                    this.getTypeList();
                },
                deleteById: function (index, row) {//index 索引位置  row当前的jsonObject对象
                    //js confirm 
                    let aid = row.typeId;
                    let that = this;

                    axios.get("/housesType/delete?typeId=" + aid).then(function (r) {
                        if (r.data.state == "success") {
                            //当前页面 数据  删
                            //删除这个索引位置的元素
                            // splice js中的数组函数  参数1 索引位置  参数2 删除数量
                            that.typeList.splice(index, 1);
                            that.$message.success("删除成功！");
                        } 
                    }).catch(function (error) {
                        that.$message.error("删除失败！");
                    });
                },
                preUpdate: function (index, row) {//准备修改
                    this.dialogVisible = true;
                    //表单元素设置默认值
                    this.typeObj = this.typeList[index];
                    
                },
                update: function () {

                    let that = this;
                  
                    let fm = new FormData();
                    axios.get("/housesType/selectAll").then(function (r) {
                        if (r.data.state == "success") {
                            var str = "";
                            that.typeList = r.data.housestypelist;
                            that.typeList.forEach(function (e) {
                                str += e.typeName + ",";
                            });
                            str = str.substring(0, str.length - 1);
                            arr = str.split(",");
                       
                            if (that.typeObj.typeName + '' == "") {
                                that.$message.error("请输入类型信息！");
                            }
                            // else if (arr.indexOf(that.typeObj.typeName + '') !== -1) {
                            //     that.$message({
                            //         message: "类型已存在，请重新输入！",
                            //         type: "error"
                            //     })

                            // }
                            else {

                                fm.append("typeId", that.typeObj.typeId);
                                fm.append("typeName", that.typeObj.typeName);

                                axios.post("/housesType/update", fm).then(function (r) {
                                    that.dialogVisible = false;

                                    that.$message({
                                        message: "修改类型成功！",
                                        type: "success",
                                        duration: 1000
                                    });
                                    setTimeout("location.href = 'housesTypeList.html'", 1000);

                                });
                            }

                        }

                    });
                }
            }
        });
    </script>
</body>

</html>